{include "INC_header.html" title="站点管理"}
<div id="app-outlet" class="app-outlet">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="config.locale" :theme="config.theme">
        <div class="app-container padding">
            <header class="auto-height padding-bottom">
                <!-- 筛选 -->
                <div class="border radius light-background">
                    <div class="ui flex-item padding border-bottom hover-background">
                        <div class="start">
                            <a-input-search
                                    v-model:value="keyword"
                                    placeholder="站点名称"
                                    enter-button="搜索"
                                    @search="setKeyword"
                            />
                        </div>
                        <div class="start" v-if="listQueryParams.keyword != ''">
                            <a-button type="danger" @click="setKeyword('')">
                                <template #icon><i class="fa fa-close margin-right-half"></i></template>
                                清除搜索
                            </a-button>
                        </div>
                        <div class="center"></div>
                        <div class="end">
                            <a-button type="primary" @click="editItem(null)">
                                <template #icon><i class="fa fa-plus margin-right"></i></template>
                                添加站点
                            </a-button>
                        </div>
                    </div>
                    <div class="ui form padding-top">
                        <div class="fields padding">
                            <div class="field">
                                <label class="label text-small">站点状态</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.state" size="small" button-style="solid" @change="getList">
                                        <a-radio-button value="all">全部</a-radio-button>
                                        <a-radio-button :value="1">开启</a-radio-button>
                                        <a-radio-button :value="0">关闭</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label text-small">默认站点</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.default" size="small" button-style="solid" @change="getList">
                                        <a-radio-button :value="0">全部</a-radio-button>
                                        <a-radio-button :value="1">默认</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label text-small">每页数量</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.total" size="small" button-style="solid" @change="getList">
                                        <a-radio-button :value="30">30</a-radio-button>
                                        <a-radio-button :value="50">50</a-radio-button>
                                        <a-radio-button :value="100">100</a-radio-button>
                                        <a-radio-button :value="200">200</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <main class="flex-column overflow-hidden">
                <div class="ui table scroll-enable primary selectable" v-if="list.rows > 0">
                    <!-- 表格头部 -->
                    <div class="thead">
                        <div class="ui row">
                            <div class="col"v-for="column in columns" :class="{ 'auto-width':!column.width }" :style="column.width ? ('width:' + column.width) : null">{{ column.title }}</div>
                        </div>
                    </div>
                    <!-- 表格内容 -->
                    <div class="tbody">
                        <div class="ui row" v-for="(item, index) in list.list">
                            <div class="col justify-center" v-for="column in columns" :class="{ 'auto-width':!column.width }" :style="column.width ? ('width:' + column.width) : null">
                                <template v-if="column.key === 'info'">
                                    <div class="ui flex-item">
                                        <div class="start">
                                            <a-avatar :size="60" shape="square" :src="item.logo"></a-avatar>
                                        </div>
                                        <div class="center">
                                            <div class="text-bold">{{ item.name }}</div>
                                            <div class="text-small padding-top-half"><a :href="item.url" target="_blank">{{ item.url }}</a></div>
                                            <div class="padding-top">
                                                <a-tag color="red" v-if="item.default == 1">默认站点</a-tag>
                                                <a-tag color="pink"><i class="fa-solid fa-wand-magic-sparkles margin-right-half"></i> {{ getTemplateName(item.template) }}</a-tag>
                                                <a-tag color="green">{{ item.icp }}</a-tag>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <div v-else-if="column.key === 'state'">
                                    <a-switch :checked="item.state == 1" checked-children="开" un-checked-children="关" @change="itemSwitch(index)" />
                                </div>
                                <div v-else-if="column.key === 'action'">
                                    <a-button class="margin-right" type="primary" @click="editItem(item)">修改</a-button>
                                    <a-popconfirm
                                            title="此操作不可恢复，确定要删除此站点？"
                                            ok-text="确定"
                                            cancel-text="取消"
                                            placement="left"
                                            @confirm="deleteItem(item.id)">
                                        <a-button danger>删除</a-button>
                                    </a-popconfirm>
                                </div>
                                <template v-else-if="column.dataIndex !== undefined">
                                    {{ item[column.dataIndex] || '' }}
                                </template>
                            </div>
                        </div>
                    </div>
                    <!-- 表格底部 -->
                    <div class="tfoot padding" v-if="list.pages > 1">
                        {include "INC_page.html"}
                    </div>
                </div>
                <div class="empty-content" v-else>
                    <a-empty :image="simpleImage" description="未添加站点">
                        <div class="padding-top"></div>
                        <a-button type="primary" @click="editItem(null)">
                            <template #icon><i class="fa fa-plus margin-right"></i></template>
                            添加新站点
                        </a-button>
                    </a-empty>
                </div>
            </main>
        </div>
        <!-- 添加、编辑 -->
        <a-drawer
                v-model:visible="item.edit"
                :title="item.id > 0 ? '修改站点' : '添加站点'"
                placement="right">
            <template #extra>
                <a-space>
                    <a-button type="primary" :loading="item.loading" @click="save()">保存</a-button>
                </a-space>
            </template>
            <div class="text-center">
                <a-avatar class="upload" :size="48" shape="square" :src="item.logo" @click="setLogo">
                    <i class="fa fa-plus" v-if="item.logo == null || item.logo == ''"></i>
                </a-avatar>
            </div>
            <div class="text-center padding text-small medium-text">站点LOGO</div>
            <div class="ui form">
                <div class="field">
                    <div class="label">站点名称</div>
                    <div class="">
                        <a-input v-model:value="item.name" placeholder="* 站点名称 *"></a-input>
                    </div>
                </div>
                <div class="fields padding-top">
                    <div class="field">
                        <div class="label">站点域名</div>
                        <div class="">
                            <a-select v-model:value="item.https" style="width: 90px">
                                <a-select-option value="0">http://</a-select-option>
                                <a-select-option value="1">https://</a-select-option>
                            </a-select>
                        </div>
                    </div>
                    <div class="field" style="flex: 1;">
                        <div class="label">&nbsp;</div>
                        <div class="">
                            <a-input v-model:value="item.host" placeholder="域名，不带斜杠"></a-input>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="label">默认关键词</div>
                    <div class="">
                        <a-input v-model:value="item.keyword" placeholder="默认页面关键词"></a-input>
                    </div>
                </div>
                <div class="field">
                    <div class="label">默认摘要</div>
                    <div class="">
                        <a-textarea rows="3" v-model:value="item.description" placeholder="默认页面摘要"></a-textarea>
                    </div>
                </div>
                <div class="field">
                    <div class="label">附加HTML代码</div>
                    <div class="">
                        <a-textarea rows="8" v-model:value="item.html" placeholder="原文保存"></a-textarea>
                    </div>
                </div>
                <div class="field">
                    <div class="label">备案号</div>
                    <div class="">
                        <a-input v-model:value="item.icp" placeholder="网站备案号"></a-input>
                    </div>
                </div>
                <div class="field">
                    <div class="label">使用模板</div>
                    <div class="cms-templates small selectable default-background radius">
                        <div class="item" :class="{ selected:template.id==item.template }" v-for="template in templateList" @click="item.template=template.id">
                            <div class="preview">
                                <img :src="template.screenshot">
                            </div>
                            <div class="name text-small max-one-line-text text-center">{{ template.name }}</div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="label">默认站点</div>
                    <div class="">
                        <a-radio-group v-model:value="item.default" button-style="solid">
                            <a-radio value="0">否</a-radio>
                            <a-radio value="1">是</a-radio>
                        </a-radio-group>
                    </div>
                </div>
                <div class="field">
                    <div class="label">站点状态</div>
                    <div class="">
                        <a-radio-group v-model:value="item.state" button-style="solid">
                            <a-radio value="0">关闭</a-radio>
                            <a-radio value="1">打开</a-radio>
                        </a-radio-group>
                    </div>
                </div>
            </div>
        </a-drawer>
        <!-- 文件选择器 -->
        <a-modal class="iframe-body"
                 v-model:visible="filesModal.show"
                 :title="filesModal.title"
                 :cancel-text="filesModal.cancelText"
                 :ok-text="filesModal.okText"
                 @ok="filesManagerOk">
            <iframe style="border: solid 1px var(--border-color); border-radius: var(--radius-width);" ref="filesFrame" v-if="filesModal.show" :src="filesModal.fs + '&resize=' + filesModal.resize + '&type=' + filesModal.type + '&multi=' + (filesModal.multi ? 1 : 0)" frameborder="0" scrolling="auto" width="100%" height="100%"></iframe>
        </a-modal>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp, defineComponent, ref } = Vue;
    const { message, Empty, Modal } = antd;
    const app = createApp({
        data() {
            return {
                //主题配置
                config: appProviderConfig,
                //空图片
                simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
                //表头
                columns: [
                    { title:"站点信息", key:"info" },
                    { width:'120px', title:"添加时间", key:"time", dataIndex:"time" },
                    { width:'120px', title:"站点状态", key:"state", dataIndex:"state" },
                    { width:'160px', title:"操作", key:"action" }
                ],
                //数据
                list: {
                    rows: 0,
                    page: 1,
                    pages: 0,
                    list: []
                },
                //列表参数
                keyword: '',
                listQueryParams: {
                    keyword: '',
                    state: 'all',
                    default: 0,
                    page: 1,
                    total: 30,
                    admin: 1
                },
                //编辑
                item: {
                    edit: false,
                    loading: false,
                    id: 0,
                    name: '',
                    host: '',
                    https: '0',
                    logo: null,
                    default: '0',
                    state: '1',
                    template: 'default',
                    keyword: '',
                    description: '',
                    html: '',
                    icp: ''
                },
                //文件管理器
                filesModal: {
                    show: false,
                    title: "文件选择",
                    okText: "确定",
                    cancelText: "取消",
                    ok: null,
                    fs: "{url url='/fs'}?parentId=0&groupName=cms&selectable=1",
                    resize: "",
                    type: "all",
                    multi: false
                },
                //模板列表
                templateList: []
            }
        },
        mounted() {
            //挂载成功
            this.initData();
            //this.editItem(null);
        },
        methods: {
            //方法
            initData: function () {
                let self = this;
                axios.get("{url url='/cms/api/template/list'}").then(({ data }) => {
                    if (data.error === 0) {
                        self.templateList = data.data;
                    }
                });
                //获取列表数据
                this.getList();
            },
            getTemplateName(dirName) {
                let name = dirName;
                if (this.templateList.length > 0) {
                    this.templateList.map(item => {
                        if (item.id == dirName) {
                            name = item.name;
                        }
                    });
                }
                return name;
            },
            //获取列表
            getList : function (){
                let self = this;
                const hide = message.loading("正在加载数据");
                axios.get("{url url='/cms/api/site/list'}", {
                    params: this.listQueryParams
                }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.list = data.data;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("加载数据失败");
                });
            },
            //首页
            firstPage : function (){
                let page = parseInt(this.list.page);
                if(page > 1){
                    this.listQueryParams.page = 1;
                    this.getList();
                }
            },
            //上一页
            prevPage : function (){
                let page = parseInt(this.list.page);
                if(page > 1){
                    this.listQueryParams.page = page - 1;
                    this.getList();
                }
            },
            //下一页
            nextPage : function (){
                let page = parseInt(this.list.page);
                let pages = parseInt(this.list.pages);
                if(page < pages){
                    this.listQueryParams.page = page + 1
                    this.getList();
                }
            },
            //最后一页
            lastPage : function (){
                let page = parseInt(this.list.page);
                let pages = parseInt(this.list.pages);
                if(page < pages){
                    this.listQueryParams.page = pages;
                    this.getList();
                }
            },
            //设置跳到第几页
            setPage : function (page){
                page = isNaN(page) ? -1 : parseInt(page);
                page = page > 0 ? page : -1;
                if(page === -1){
                    message.error('参数错误');
                }else if(page !== this.list.page){
                    this.listQueryParams.page = page;
                    this.getList();
                }
            },
            //设置参数，重载列表
            setListQueryParam : function (params){
                //通过替换key值的方式
                for(let key in params){
                    this.listQueryParams[key] = params[key];
                }
                this.getList();
            },
            //搜索
            setKeyword: function (value){
                if(this.listQueryParams.keyword != value){
                    this.listQueryParams.keyword = value;
                    this.getList();
                }
                if (value == '') {
                    this.keyword = '';
                }
            },
            //清除搜索
            cleanKeyword: function (){
                this.keyword = '';
                this.listQueryParams.keyword = '';
                this.getList();
            },
            //删除站点
            deleteItem(id) {
                let self = this;
                const hide = message.loading("正在删除", 0);
                axios.post("{url url='/cms/api/site/delete'}", { id }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.getList();
                        message.success(data.message);
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                })
            },
            //添加、编辑站点
            editItem(item) {
                item = item || {
                    id: 0,
                    name: '',
                    host: '',
                    https: '0',
                    logo: null,
                    default: '0',
                    state: '1',
                    template: 'default',
                    keyword: '',
                    description: '',
                    html: '',
                    icp: ''
                };
                item.edit = true;
                item.loading = false;
                this.item = JSON.parse(JSON.stringify(item));
            },
            //打开文件管理对话框
            filesManagerOpen: function (params) {
                params = params || {};
                this.filesModal.title = params.title || "文件选择";
                this.filesModal.okText = params.okText || "确定";
                this.filesModal.cancelText = params.cancelText || "取消";
                this.filesModal.resize = params.resize || "";
                this.filesModal.type = params.type || "all";
                this.filesModal.multi = params.multi || false;
                this.filesModal.ok = params.ok || null;
                this.filesModal.show = true;
            },
            //点击确定
            filesManagerOk: function () {
                //从iFrame里边找图片
                let filesManager = this.$refs.filesFrame.contentWindow.FilesManager || {};
                if (filesManager.list) {
                    let list = [];
                    filesManager.list.map(file => {
                        if (file.checked && (this.filesModal.type === "all" || file.type === this.filesModal.type)) {
                            list.push(file);
                        }
                    });
                    if (list.length > 0 && typeof this.filesModal.ok === "function") {
                        this.filesModal.ok(this.filesModal.multi ? list : list[0]);
                    }
                }
                //关闭文件选择框
                this.filesModal.show = false;
            },
            setLogo: function () {
                let self = this;
                this.filesManagerOpen({
                    title: "选择站点LOGO图片",
                    okText: "确定",
                    cancelText: "取消",
                    resize: "120x120",
                    type: "image",
                    multi: false,
                    ok: image => {
                        self.item.logo = image.url;
                    }
                });
            },
            save(){
                if (this.item.loading) {
                    return;
                }
                //判断
                if (this.item.name.toString().length < 1 || this.item.name.toString().length > 50) {
                    return message.error("站点名称至少1个字符，且不可超过50个字符");
                }
                if (this.item.host.toString().length < 4 || this.item.name.toString().length > 30) {
                    return message.error("站点域名至少4个字符，且不可超过30个字符");
                }
                this.item.loading = true;
                const hide = message.loading("正在提交...", 0);
                let self = this;
                axios.post("{url url='/cms/api/site/save'}", this.item).then(({ data }) => {
                    hide();
                    self.item.loading = false;
                    if (data.error === 0) {
                        self.item.edit = false;
                        message.success("保存成功");
                        self.getList();
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    self.item.loading = false;
                    message.error("服务端繁忙");
                });
            },
            itemSwitch(index) {
                let id = this.list.list[index].id;
                let self = this;
                axios.post("{url url='/cms/api/site/switch'}", { id }).then(({ data }) => {
                    if (data.error === 0) {
                        self.list.list[index].state = self.list.list[index].state == 1 ? 0 : 1;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    message.error("服务端繁忙");
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
    //
    if (window.parent) {
        window.parent.postMessage({
            event: "location",
            data: [
                { name:"站点管理" }
            ]
        });
    }
</script>
{include "INC_footer.html"}